<template>
  <div ref="appWidth" style="display: flex;flex-direction: column;align-items: center">
    <el-image
      class="indexImg"
      src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/cooperation.png"></el-image>
      <div class="media_list_box">
         <el-tabs v-model="activeName" @tab-click="handleClick" class="mediaTabs">
           <el-tab-pane label="公司新闻" name="first">
             <div class="media_list" ref="titleWidth">
               <div class="media_list_img">
                 <el-image :style="{width: imgWidth,height:imgHeight}"></el-image>
               </div>
               <div class="media_list_content" :style="{width: titleWidth}">
                 <span class="media_list_content_title">核心团队成员国国国国男国国国国国男国国国</span>
                 <span class="media_list_content_subtitle">厦⻔睿商⽹络科技有限公司是一家正在蓬勃发展的新兴高新科技企业于互联网+时代潮头，借助大数据、云计算、物联网等信息技术，提</span>
                 <span class="media_list_content_date">2020.10.20</span>
               </div>
             </div>
           </el-tab-pane>
           <el-tab-pane label="行业新闻" name="second">
             <div class="media_list" ref="titleWidth2">
               <div class="media_list_img">
                 <el-image :style="{width: imgWidth,height:imgHeight}"></el-image>
               </div>
               <div class="media_list_content" :style="{width: titleWidth}">
                 <span class="media_list_content_title">核心团队成员国国国国男国国国国国男国国国</span>
                 <span class="media_list_content_subtitle">厦⻔睿商⽹络科技有限公司是一家正在蓬勃发展的新兴高新科技企业于互联网+时代潮头，借助大数据、云计算、物联网等信息技术，提</span>
                 <span class="media_list_content_date">2020.10.20</span>
               </div>
             </div>
           </el-tab-pane>
           <el-tab-pane label="市场活动" name="third">
             <div class="media_list" ref="titleWidth3">
               <div class="media_list_img">
                 <el-image :style="{width: imgWidth,height:imgHeight}"></el-image>
               </div>
               <div class="media_list_content" :style="{width: titleWidth}">
                 <span class="media_list_content_title">核心团队成员国国国国男国国国国国男国国国</span>
                 <span class="media_list_content_subtitle">厦⻔睿商⽹络科技有限公司是一家正在蓬勃发展的新兴高新科技企业于互联网+时代潮头，借助大数据、云计算、物联网等信息技术，提</span>
                 <span class="media_list_content_date">2020.10.20</span>
               </div>
             </div>
           </el-tab-pane>
         </el-tabs>
      </div>
       <el-pagination
         style="margin-top: 10px;margin-bottom: 10px"
         background
         :pager-count="pagerCount"
         layout="prev, pager, next"
         :total="1000">
       </el-pagination>
  </div>
</template>

<script>
    export default {
      data() {
        return {
          activeName: 'first',
          titleWidth:0,
          imgWidth:0,
          imgHeight:0,
          pagerCount:'3'
        };
      },
      methods: {
        handleClick(tab, event) {
          console.log(tab, event);
        }
      },
      mounted() {
        var appWidth = this.$refs.appWidth.clientWidth
        if (appWidth < 300) {
          this.titleWidth =( this.$refs.titleWidth.clientWidth )+ 'px'
          this.imgWidth = ( this.$refs.titleWidth.clientWidth )+ 'px'
          this.imgHeight = ( this.$refs.titleWidth.clientWidth * 0.6)+ 'px'
        }else {
          this.titleWidth = (this.$refs.titleWidth.clientWidth - 109)+ 'px'
          this.imgWidth = '100px'
          this.imgHeight = '60px'
        }
        if (appWidth < 420) {
          this.pagerCount = '2'
        }else if(appWidth > 420 && appWidth< 750){
          this.pagerCount = '3'
        }else if(appWidth > 750){
          this.pagerCount = '6'
        }
        window.onresize = () => {
          return (() => {
            var appWidth = this.$refs.appWidth.clientWidth
            if (appWidth < 300) {
              this.titleWidth =( this.$refs.titleWidth.clientWidth )+ 'px'
              this.imgWidth = ( this.$refs.titleWidth.clientWidth )+ 'px'
              this.imgHeight = ( this.$refs.titleWidth.clientWidth * 0.6)+ 'px'
            }else {
              this.titleWidth = (this.$refs.titleWidth.clientWidth - 109)+ 'px'
              this.imgWidth = '100px'
              this.imgHeight = '60px'
            }
            if (appWidth < 420) {
              this.pagerCount = '2'
            }else if(appWidth > 420 && appWidth< 750){
              this.pagerCount = '3'
            }else if(appWidth > 750){
              this.pagerCount = '6'
            }
            console.log(this.titleWidth)
          })()
        }
      }
    }
</script>

<style scoped>
  .indexImg{
    background: radial-gradient(black, transparent);
    display: block;
  }
  .mediaTabs{
    margin-top: 10px;
  }
  @media screen and (min-width: 0px) and (max-width: 299px) {
    .media_list{
      display: flex;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      padding-top: 10px;
      padding-bottom: 10px;
      flex-direction: column;
    }
    .media_list_img{
      margin-right: 10px;
      width: 100px;
      margin-bottom: 4px;
    }
    .media_list_content{
      display: flex;
      flex-direction: column;
    }
    .media_list_content_title{
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
      margin-bottom: 4px;
    }
    .media_list_content_subtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #686868;
      line-height: 13px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      margin-bottom: 4px;
    }
    .media_list_content_date{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #686868;
      line-height: 13px;
    }
    .media_list_box{
      width: 80%;
    }
  }
  @media screen and (min-width: 300px) and (max-width: 599px) {
    .media_list{
      display: flex;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .media_list_img{
      margin-right: 10px;
      width: 100px;
      height: 60px;
    }
    .media_list_content{
      display: flex;
      flex-direction: column;
    }
    .media_list_content_title{
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
      margin-bottom: 4px;
    }
    .media_list_content_subtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #686868;
      line-height: 13px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      margin-bottom: 4px;
    }
    .media_list_content_date{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #686868;
      line-height: 13px;
    }
    .media_list_box{
      width: 80%;
    }
  }
  @media screen and (min-width: 600px) {
    .media_list{
      display: flex;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .media_list_img{
      margin-right: 10px;
      width: 100px;
      height: 60px;
    }
    .media_list_content{
      display: flex;
      flex-direction: column;
    }
    .media_list_content_title{
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
      margin-bottom: 4px;
    }
    .media_list_content_subtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #686868;
      line-height: 13px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      margin-bottom: 4px;
    }
    .media_list_content_date{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #686868;
      line-height: 13px;
    }
    .media_list_box{
      width: 60%;
    }
  }
</style>
